<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Chrome, Firefox OS and Opera -->
    <meta name="theme-color" content="#141852">
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#141852">
    <!-- iOS Safari -->
    <meta name="apple-mobile-web-app-status-bar-style" content="#141852">

    <!-- Primary Meta Tags -->
    <title>Happy Birthday to You!!!</title>
    <meta name="title" content="Happy Birthday to You">
    <meta name="description" content="Wishing you a very Happy Birthday Dear">

    <meta property="og:type" content="website">
    <meta property="og:title" content="Happy Birthday to you">
    <meta property="og:description" content="Wishing you a very Happy Birthday Dear">
    <meta property="og:image" content="https://telegra.ph/file/cab24ce49882fbae39a13.png">

    <link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="./css/style.css">
</head>
<body>

    <!-- Sfx calling -->

    <audio class="blast-aud">
        <source src="./resources/sfx/blast.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
    <audio class="hbd-aud">
        <source src="./resources/sfx/hbd_1.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
    <audio class="switch-aud">
        <source src="./resources/sfx/switch.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
    <audio class="door-aud">
        <source src="./resources/sfx/door.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
    <audio class="haunt-aud">
        <source src="./resources/sfx/withme.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>


    <div class="content">
        <img src="./resources/img/flag-right.png" alt="flags" class="flag flag--c-left">
        <img src="./resources/img/flag-left.png" alt="flags" class="flag flag--left">
        <img src="./resources/img/flag-left.png" alt="flags" class="flag flag--c-right">
        <img src="./resources/img/flag-right.png" alt="flags" class="flag flag--right">
        <img src="./resources/img/balloon-left.png" alt="balloon-left" class="balloon balloon--left">
        <img src="./resources/img/balloon-right.png" alt="balloon-right" class="balloon balloon--right">
        <div class="frame">
            <div class="img-back">
                <div class="bd-pic"></div>
                <img class="cap" src="./resources/img/bday-cap.svg" alt="">
                <img class="confetti" src="./resources/img/confetti.svg" alt="">
                <img class="cake" src="./resources/img/cake.svg" alt="">
                <div class="velas">
                    <div class="fuego"></div>
                    <div class="fuego"></div>
                    <div class="fuego"></div>
                    <div class="fuego"></div>
                    <div class="fuego"></div>
                </div>
            </div>
            <div class="HBD-text">
                <p class="HBD">A Very Happy Birthday to You</p>
                <p class="nickname">NickName</p>
            </div>    
        </div>

        <div class="frame frame2">
            <div class="scroll">
                <p>
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                    生日快乐
                </p>    
            </div>
        </div> 
    </div>

    <div class="flash"></div>

    <div class="giftroom">
        <p class="gift-text">嘿嘿!🤭</p>
        <p class="gift-text">瞅好了哈!这里有件礼物要给你...</p>
        <p class="gift-text">来吧,让我们打开它看看里面有什么👀!</p>
    </div>

    <div class="hallway">
        <p class="hall-text">这或许就是你工作的环境吧!</p>
        <p class="hall-text">感谢你来到张家口赛区做志愿者</p>
        <p class="hall-text">这里的确很冷,你一定吃了不少苦头吧</p>
        <p class="hall-text">感谢你为冬奥所做的一切</p>
    </div>

    <div class="empty-room">
        <p class="room-text">今天是2022年2月6日</p>
        <p class="room-text">...年前,某位小公主降生了</p>
        <p class="room-text">推开门吧,看看门外有什么</p>
    </div>

    <div class="darkroom">
        <p class="bb-text">你好鸭!</p>
        <p class="bb-text">为啥这里这么黑嘞?🙄</p>
        <p class="bb-text"><span class="name">Name</span>! 可以帮忙开下灯吗?</p>
    </div>

    <div class="btn switch"></div>
    <div class="btn-ref">点一下这个灯泡试试🤗</div>

     <!-- animation    -->

    <script src="./js/animation.js"></script>
    

</body>
</html>
